<template>
	<view class="page_full">
		<view class="user_box">
			<image :src="userInfo.avatar" mode="" v-if="userInfo.avatar" class="def_header"></image>
			<!-- <image src="defHeader" mode="" v-else></image> -->
			<view class="def_header" v-else>
				<text class="def_name">{{ (userInfo.nickName||"未知").slice(0,1) }}</text>
			</view>
			<view class="user_info">
				<text>用户名：{{userInfo.nickName}}</text>
			</view>
			<view>
				<text>所属部门：{{ (userInfo.dept||{}).deptName }}</text>
			</view>
		</view>
		<view class="content_box">
			<view class="line_list">
				<view class="line_cell" @click="goHistory">
					<image src="@/static/logo/history_blue.png" mode=""></image>
					<text>上报历史</text>
				</view>
				<view class="line_cell" @click="goAdd">
					<image src="@/static/logo/add_event_blue.png" mode=""></image>
					<text>创建工单</text>
				</view>
			</view>
		</view>
		
		<view class="sign_out">
			<u-button type="primary" text="退出登录"  @click="signOut"></u-button>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref } from "vue"
	
	let userInfo = ref({
		nickName: "",
		dept: {}
	})
	
	
	function goHistory() {
		uni.navigateTo({
			url:"/pages/initiate/initiate"
		})
	}
	
	function goAdd() {
		uni.navigateTo({
			url:"/pages/addOrder/addOrder"
		})
	}
	
	function signOut() {
		uni.removeStorageSync("token")
		uni.removeStorageSync("client_id")
		uni.removeStorageSync("reget")
		uni.redirectTo({
			url:"/pages/login/login"
		})
	}
	
	onLoad(()=>{
		if(uni.getStorageSync("userInfo")) {
			userInfo.value = uni.getStorageSync("userInfo")
		}
	})
	
</script>

<style scoped lang="scss">
	.page_full{
		background-color: #f8f8f8;
	}
	.user_box {
		width: 100%;
		background-color: #89f4ff;
		padding-top: 100rpx;
		padding-bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		.user_info {
			margin-top: 32rpx;
		}
		.def_header {
			--user-img-size: 180rpx;
			width: var(--user-img-size);
			height: var(--user-img-size);
			border-radius: 50%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #89f4ff;
			.def_name {
				font-size: 80rpx;
				color: #89f4ff;
				font-weight: 600;
				font-family: "宋体";
			}
		}
	}
	.content_box {
		width: 100%;
		padding: 30rpx;
		.line_list {
			width: 100%;
			.line_cell {
				margin-top: 24rpx;
				width: 100%;
				min-height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 10rpx;
				
				image {
					--img-logo-size: 40rpx;
					width: var(--img-logo-size);
					height: var(--img-logo-size);
					margin-right: 24rpx;
					transform: translateY(2rpx);
				}
			}
		}
	}
	
	.sign_out {
		padding: 30rpx;
	}
</style>
